<div class="slideshowWrapper">
    <div id="mySlideshows" class="slideImages">
        <img src="images/slide_1.jpg" alt="1"/>
        <img src="images/slide_2.jpg" alt="2"/>
        <img src="images/slide_3.jpg" alt="3"/>
        <img src="images/slide_4.jpg" alt="4"/>

        <!-- empty element for Progress Bar -->
        <div class="slideProgress"></div>

        <!-- empty element for Control next/prev -->
        <div class="slidePrev" id="slidePrev"></div>
        <div class="slideNext" id="slideNext"></div>

        <!-- empty element for pager links -->
        <div class="cycle-pager"></div>
    </div>
    <div class="slideshowLeftIcon"></div>
    <div class="slideshowRightIcon"></div>
</div>

<div class="container_12 bodyWrapper">
    <div class="blockHeight50"></div>
    <div class="grid_12">
        <h1>DỰ ÁN NỔI BẬT</h1>
        
        <?php include('product_sub.php') ?>
    </div>
    <div class="blockHeight20"></div>
</div>

<script type="text/javascript">
var progress = $('.slideProgress'), slideSelector = $( '#mySlideshows' );
var timeTracking;
var timeRemain;

slideSelector.on( 'cycle-initialized cycle-before', function( e, opts ) {
    progress.stop(true).css( 'width', 0 );
});
slideSelector.on( 'cycle-initialized cycle-after', function( e, opts ) {
    progress.stop(true)
    .css('width', 0 )
    .animate({ width: '100%' }, opts.timeout, 'linear' );

    timeTracking = new Date().getTime();
});
slideSelector.on( 'cycle-paused', function( e, opts ) {
    progress.stop(); 

    myTime = new Date().getTime();
    timeRemain = opts.timeout - (myTime - timeTracking);
});
slideSelector.on( 'cycle-resumed', function( e, opts, timeoutRemaining ) {
    progress.animate({ width: '100%' }, timeoutRemaining, 'linear' );
});

$('#mySlideshows').cycle({
    log: false,
    pauseOnHover: true,
    timeout: 5000,
    fx: 'fade',
    prev: '#slidePrev',
    next: '#slideNext',
    pager: '.cycle-pager'
});    
</script>